<template>
    <div class="transfer-container">
        <div class="transfer-card">
            <h2>转账服务</h2>
            <div class="transfer-form">
                <div class="form-group">
                    <label>收款卡号</label>
                    <input type="text" v-model="receiverCardno" placeholder="请输入收款人卡号">
                </div>
                <div class="form-group">
                    <label>转账金额</label>
                    <div class="amount-input">
                        <span class="currency">¥</span>
                        <input type="number" v-model="amount" placeholder="请输入转账金额">
                    </div>
                </div>
                <div class="form-group">
                    <label>备注信息</label>
                    <input type="text" v-model="remark" placeholder="请输入转账备注（选填）" maxlength="50">
                </div>
                <div class="form-actions">
                    <button class="btn-reset" @click="resetForm">重置</button>
                    <button class="btn-submit" @click="submitTransfer" :disabled="loading">
                        {{ loading ? '处理中...' : '确认转账' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.transfer-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    padding: 20px;
}

.transfer-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    padding: 30px;
}

h2 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 600;
}

.transfer-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-weight: 500;
    font-size: 14px;
}

input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

input:focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.amount-input {
    position: relative;
}

.currency {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #606266;
    font-weight: bold;
}

.amount-input input {
    padding-left: 30px;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn-reset,
.btn-submit {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-reset {
    background-color: #f0f2f5;
    color: #606266;
}

.btn-submit {
    background-color: #409EFF;
    color: white;
}

.btn-reset:hover {
    background-color: #e4e7ed;
}

.btn-submit:hover {
    background-color: #66b1ff;
}

.btn-submit:disabled {
    background-color: #a0cfff;
    cursor: not-allowed;
}

.message {
    margin-top: 20px;
    padding: 12px 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

.message.error {
    background-color: #fef0f0;
    color: #f56c6c;
    border: 1px solid #fbc4c4;
}

.message.success {
    background-color: #f0f9eb;
    color: #67c23a;
    border: 1px solid #c2e7b0;
}

.message.info {
    background-color: #f4f4f5;
    color: #909399;
    border: 1px solid #e9e9eb;
}

@media (max-width: 768px) {
    .transfer-card {
        padding: 20px;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-reset,
    .btn-submit {
        width: 100%;
    }
}
</style>

<script>
export default {
    name: 'Transfer',
    data() {
        return {
            receiverCardno: '',
            amount: '',
            remark: '',
            loading: false,
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo
        }
    },
    methods: {
        async submitTransfer() {
            // 表单验证
            if (!this.receiverCardno) {
                this.$message.warning('请输入收款人卡号')
                return;
            }
            if (!this.amount || this.amount <= 0) {
                this.$message.warning('请输入有效的转账金额')
                return;
            }

            this.loading = true;

            this.$axios({
                method: 'get',
                url: '/bank/transfer?cardno=' + this.receiverCardno + "&balance=" + this.amount + "&fromCardno=" + this.userInfo.cardno + "&remark=" + this.remark,
            })
                .then((res) => {
                    console.log(res);
                    if (res.data.code === 0) {
                        this.$message.success('转账成功')
                    } else {
                        this.$message(res.data.msg || '转账失败');
                    }
                })
        },
        resetForm() {
            this.receiverCardno = '';
            this.amount = '';
            this.remark = '';
            this.loading = false;
        }
    }
}
</script>